<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <el-card shadow="never">
      <div class="card-content">
        <el-button
          type="warning"
          style="margin-bottom: 20px;"
          @click="add"
        >新增模板</el-button>
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="templateType"
            label="模板类型"
            width="180"
            :formatter="formatext"
          >
          </el-table-column>
          <el-table-column
            prop="transportType"
            label="运算类型"
            width="180"
            :formatter="commatext"
          >
          </el-table-column>
          <el-table-column
            align="left"
            label="关联城市"
            width="220"
          >
            <template #default="{ row }">
              <span v-if="row.associatedCityList">{{ getAssociatedCityList(row.associatedCityList) }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="firstWeight"
            label="首重"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="continuousWeight"
            label="续重"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="lightThrowingCoefficient"
            label="轻抛系数"
            width="180"
          >
          </el-table-column>

          <el-table-column
            label="操作"
            header-align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="handleEdit(scope.$index, scope.row.id)"
              >编辑</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button
                type="text"
                size="small"
                style="color:#f56c6c;"
                @click="handleDelete(scope.$index, scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div
        slot="footer"
        class="card-footer"
      >
      </div>
    </el-card>
    <add-employee
      :id.sync="id"
      :dialogtype="dialogtype"
      :show-dialog.sync="showDialog"
      @refresh="getList"
    />
  </div>
</template>

<script>
import { freightManageList, freightManageDelete } from '@/api/transit'
import AddEmployee from '@/views/transit/AddEmployee.vue'
export default {
  components: {
    AddEmployee
  },
  data() {
    return {
      tableRowClassName: 'my-row-class',
      tableData: [{}
      ],
      id: '',
      associatedCityList: [
        { value: '1', label: '全国' },
        { value: '2', label: '京津冀' },
        { value: '3', label: '江浙沪' },
        { value: '4', label: '川渝' },
        { value: '5', label: '黑吉辽' }
      ],
      showDialog: false,
      dialogtype: 'add'
    }
  },
  mounted(
  ) {
    this.getList()
  },
  methods: {
    // 编辑删除
    async handleEdit(index, row) {
      // console.log(index, row)
      this.id = row
      this.dialogtype = 'edit'
      this.showDialog = true
    },
    handleDelete(index, id) {
      // console.log(index, row)
      // console.log(id)
      this.$confirm('确认要删除该模板吗?', '温馨提示').then(async() => {
        await freightManageDelete(id) // 调用删除接口
        this.getList() // 重新加载数据
        this.$message.success('删除模板成功')
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取列表数据
    async getList() {
      const { data: res } = await freightManageList()
      this.tableData = res
      // console.log(res, '1')
    },
    // 计算模板类型
    formatext(row, column, cellvalue, index) {
      if (cellvalue === 1) {
        return '同城寄'
      } else if (cellvalue === 2) {
        return '省内寄'
      } else if (cellvalue === 3) {
        return '经济区互寄'
      } else if (cellvalue === 4) {
        return '跨省寄'
      }
    },
    // 运送类型：1-普快，2-特快
    commatext(row, column, cellvalue, index) {
      if (cellvalue === 1) {
        return '普快'
      } else if (cellvalue === 2) {
        return '特快'
      }
    },
    citylist(row, column, cellvalue, index) {
      const results = []
      const formlistcreela = +cellvalue

      if (formlistcreela === 1) {
        results.push('全国')
      }
      if (formlistcreela === 2) {
        results.push('京津冀')
      }
      if (formlistcreela === 3) {
        results.push('江浙沪')
      }
      if (formlistcreela === 4) {
        results.push('川渝')
      }
      if (formlistcreela === 5) {
        results.push('黑吉辽')
      }

      return results
    },
    add() {
      this.dialogtype = 'add'
      this.showDialog = true
    },

    // 处理返回的关联城市的value数组转化为城市名称
    getAssociatedCityList(list) {
      const cityNames = list.map((value) => {
        const city = this.associatedCityList.find((item) => item.value === String(value))
        return city ? city.label : ''
      })
      if (cityNames[0] === '') {
        cityNames.shift()
      }
      return cityNames.join(',')
    }
  }

}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    /deep/ .el-dialog__body {
      padding-left: 0px;
    }
  }
}
 .el-table .warning-row {
    background: oldlace;
   .caozuo {
      margin-right: 150px;
    }
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .el-card{
    margin: 20px;
  }

</style>
